<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app">
    <div>{{title}}</div>
    <div>
      省份：
      <!-- change事件是下拉选中项变化 -->
      <select v-model="pid" @change="queryCity">
        <option v-for="d in plist" :value="d.pid">
          {{d.province}}
        </option>
      </select>

      城市：
      <select v-model="cid">
        <option v-for="d in clist" :value="d.cid">
          {{d.city}}
        </option>
      </select>

      省份编号：{{pid}}
      城市编号：{{cid}}

      <hr>
      选中的信息：{{province.province}}{{city.city}}
      <hr>

      {{province}}
      ===
      {{city}}

      <!-- {{clist}} -->
      <!-- {{plist}} -->
      <!-- 
        作业1：完成部门和员工的联动查询
        作业2：完成班级和学生的联动查询
        挑战题：完成区域联动查询
      -->

    </div>
  </div>


  <script src="lib/vue.min.js"></script>
  <script src="lib/axios.min.js"></script>
  <script src="lib/qs.min.js"></script>
  <script src="lib/spark-md5.min.js"></script>
  <script src="js/ajax.js"></script>


  <script src="js/vue03.js"></script>

</body>

</html>